<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>按钮</button>
    <script>
        /* 
            this指向（this指向的理解--抄写5）

            常见的this 指向的 (this是函数调用的时候，函数内部this 才确定-不是在定义的时候确定-运行时)
                1-构造函数的内部，使用new调用构造函数-this-指向new的时候创建的对象
                2-对象的方法内部，哪个对象调用这个方法，方法内部的this就指向谁
                3-事件处理函数，给谁添加的事件，事件处理函数中的this 就是谁(dom0事件处理函数就是对象的方法)
                4-其他函数-》全局函数--局部函数--匿名函数-》this 都是window
                5-箭头函数 -没有自己的this，跟上下文一致（所处的环境）---构造函数不能写成箭头函数
        */
        function Dog(name) {
            this.name = name;
            // 1-构造函数的内部，使用new调用构造函数-this-指向new的时候创建的对象
            console.log(this);

            this.run = function () {
                // 2 - 对象的方法内部，哪个对象调用这个方法，方法内部的this就指向谁

                console.log(this);
                console.log(this.name + '：跑');
            }


        }
        let d1 = new Dog('d1');
        let d2 = new Dog('d2');

        d2.run();
        d1.run();


        let btn = document.querySelector('button');
        // btn.onclick = function () {
        //     // 3-事件处理函数，给谁添加的事件，事件处理函数中的this 就是谁btn
        //     // btn.onclick = fn
        //     // btn.onclick()
        //     console.log(this);//btn
        // }
        btn.addEventListener('click', function () {
            console.log(this);
        })



        // 4-其他函数-》全局函数--局部函数--匿名函数-》this 都是window
        function box() {
            console.log(this);//Window
            function test() {
                console.log(this);//window

            }
            test()

        }
        box();

        setTimeout(function () {
            console.log(this);//window
        }, 1000)

        let arr = [1, 2];
        arr.forEach(function () {
            console.log(this);//window
        })



    </script>

</body>

</html>